<template>
  <div class="home">
    <div class="wrapper">
      <div class="left">
        <div class="title">实时监控</div>
        <div class="tree">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true">
            <template class="custom-tree-node" slot-scope="{ node, data }">
              <span style="display: flex; align-items: center; height: 40px">
                <span>
                  <!-- <img v-if="!data.children && node.level !== 1" src="" alt="" /> //没有子级的图标，我这里没有子级不设置图标 -->
                  <img v-if="node.level != 1" src="../../assets/jiankong.png" alt="" />
                </span>
                <span class="label" style="margin-left: 5px">{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </div>
        <div class="from">
          <!--          <el-select style="width: 100%" v-model="value" placeholder="请选择">-->
          <!--            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
          <!--          </el-select>-->
          <!--          <el-select style="width: 100%" v-model="value1" placeholder="请选择">-->
          <!--            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
          <!--          </el-select>-->
          <p>开始时间</p>
          <el-date-picker style="width: 100%" v-model="startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
          <p>结束时间</p>
          <el-date-picker style="width: 100%" v-model="endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
          <el-button style="width: 100%" type="primary" @click="startPlayback">开始回放</el-button>
        </div>
      </div>
      <div class="right">
        <div class="video">
          <div id="videoBox" class="video-box">
            <div id="divPlugin" class="plugin" :style="{ width: width + 'px', height: height + 'px' }"></div>
          </div>
        </div>
        <!--        <div class="video-bottom">-->
        <!--          <img src="../../assets/View1.png" @click="changeWndNum(1)" alt="" />-->
        <!--          <img src="../../assets/View4.png" @click="changeWndNum(2)" alt="" />-->
        <!--          <img src="../../assets/View9.png" @click="changeWndNum(3)" alt="" />-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios';

  export default {
    name: 'HomeView',
    data() {
      return {
        show: true,
        currentIndex: -1,
        videoList: [
          { index: 0, url: '' },
          { index: 1, url: '' },
          { index: 2, url: '' },
          { index: 3, url: '' },
        ],
        // webRtcServer: null,
        // webRtcServer1: null,
        options: [
          {
            value: '选项1',
            label: '全部录像类型',
          },
        ],
        value: '',
        options1: [
          {
            value: '选项1',
            label: '中心存储',
          },
        ],
        value1: '',
        startTime: '',
        endTime: '',
        url: '',
        width: 0,
        height: 0,
        data: [
          {
            label: '华鑫',
            isChildren: false,
            children: [
              {
                label: '153',
                isChildren: false,
                children: [
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153机头楼梯',
                    password: 'hx123456',
                    channel: '1',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153机头空地',
                    password: 'hx123456',
                    channel: '2',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153机头沿线',
                    password: 'hx123456',
                    channel: '3',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153机头空地',
                    password: 'hx123456',
                    channel: '6',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153机头楼梯口',
                    password: 'hx123456',
                    channel: '7',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153张紧控制箱',
                    password: 'hx123456',
                    channel: '10',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153机尾沿线(',
                    password: 'hx123456',
                    channel: '11',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153机尾',
                    password: 'hx123456',
                    channel: '12',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153机尾沿线2',
                    password: 'hx123456',
                    channel: '13',
                    url: '10.13.155.17',
                  },
                ],
              },
              {
                label: '154',
                isChildren: false,
                children: [
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154高压室门口',
                    password: 'hx123456',
                    channel: '2',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154张紧控制箱',
                    password: 'hx123456',
                    channel: '7',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154机头皮带',
                    password: 'hx123456',
                    channel: '8',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154机头皮带2',
                    password: 'hx123456',
                    channel: '9',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154楼梯口1',
                    password: 'hx123456',
                    channel: '10',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154机头皮带',
                    password: 'hx123456',
                    channel: '13',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154视频控制箱',
                    password: 'hx123456',
                    channel: '15',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154机尾沿线',
                    password: 'hx123456',
                    channel: '5',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154机尾滚筒',
                    password: 'hx123456',
                    channel: '8',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154机尾沿线',
                    password: 'hx123456',
                    channel: '9',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154二层三层过道',
                    password: 'hx123456',
                    channel: '16',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154沿线楼梯',
                    password: 'hx123456',
                    channel: '2',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154机头皮带',
                    password: 'hx123456',
                    channel: '3',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154-321小车限位',
                    password: 'hx123456',
                    channel: '27',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154-311小车限位',
                    password: 'hx123456',
                    channel: '28',
                    url: '10.13.155.15',
                  },
                ],
              },
              {
                label: '311',
                isChildren: false,
                children: [
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311皮带控制箔',
                    password: 'hx123456',
                    channel: '4',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311皮带沿线机头',
                    password: 'hx123456',
                    channel: '5',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311张紧滚筒',
                    password: 'hx123456',
                    channel: '10',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311梯子口',
                    password: 'hx123456',
                    channel: '11',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311机头张紧控制箱',
                    password: 'hx123456',
                    channel: '15',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311、321过道',
                    password: 'hx123456',
                    channel: '14',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311机尾',
                    password: 'hx123456',
                    channel: '12',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311楼梯口',
                    password: 'hx123456',
                    channel: '8',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311-层滚筒',
                    password: 'hx123456',
                    channel: '18',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311视频控制箱(',
                    password: 'hx123456',
                    channel: '19',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311-层滚筒',
                    password: 'hx123456',
                    channel: '18',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311视频控制箱(',
                    password: 'hx123456',
                    channel: '19',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311张紧控制箱',
                    password: 'hx123456',
                    channel: '2',
                    url: '10.13.155.20',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311、312沿线',
                    password: 'hx123456',
                    channel: '14',
                    url: '10.13.155.16',
                  },
                ],
              },
              {
                label: '312',
                isChildren: false,
                children: [
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312机头沿线',
                    password: 'hx123456',
                    channel: '17',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312桥下减速机',
                    password: 'hx123456',
                    channel: '18',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312减速机',
                    password: 'hx123456',
                    channel: '19',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312机头',
                    password: 'hx123456',
                    channel: '20',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312张紧控制箱',
                    password: 'hx123456',
                    channel: '24',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312机头皮带检测',
                    password: 'hx123456',
                    channel: '25',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312桥下过道',
                    password: 'hx123456',
                    channel: '26',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312减速机热成像',
                    password: 'hx123456',
                    channel: '29',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312、322机尾过道',
                    password: 'hx123456',
                    channel: '9',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312机尾防雨置',
                    password: 'hx123456',
                    channel: '14',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312、322机尾过道',
                    password: 'hx123456',
                    channel: '9',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312箱变',
                    password: 'hx123456',
                    channel: '1',
                    url: '10.13.155.20',
                  },
                ],
              },
              {
                label: '164',
                isChildren: false,
                children: [
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164二层过道梯子',
                    password: 'hx123456',
                    channel: '17',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164楼梯口1',
                    password: 'hx123456',
                    channel: '18',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头沿线',
                    password: 'hx123456',
                    channel: '19',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头箱变侧门',
                    password: 'hx123456',
                    channel: '20',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164楼梯',
                    password: 'hx123456',
                    channel: '21',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164s电机减速机',
                    password: 'hx123456',
                    channel: '22',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164-321小车限位',
                    password: 'hx123456',
                    channel: '23',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164-311小车限位',
                    password: 'hx123456',
                    channel: '24',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头张紧装置',
                    password: 'hx123456',
                    channel: '25',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头箱变低压室',
                    password: 'hx123456',
                    channel: '26',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机尾沿线1',
                    password: 'hx123456',
                    channel: '27',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机尾沿线2',
                    password: 'hx123456',
                    channel: '28',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机尾滚筒',
                    password: 'hx123456',
                    channel: '29',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机尾箱交',
                    password: 'hx123456',
                    channel: '30',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154减速机热成像',
                    password: 'hx123456',
                    channel: '31',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头电机',
                    password: 'hx123456',
                    channel: '3',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164二层滚筒',
                    password: 'hx123456',
                    channel: '4',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164张紧滚筒',
                    password: 'hx123456',
                    channel: '5',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164二层过道',
                    password: 'hx123456',
                    channel: '6',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头沿线',
                    password: 'hx123456',
                    channel: '11',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头楼梯口',
                    password: 'hx123456',
                    channel: '16',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164二层楼梯',
                    password: 'hx123456',
                    channel: '17',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164一层减速机',
                    password: 'hx123456',
                    channel: '19',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164视频控制箱',
                    password: 'hx123456',
                    channel: '20',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头二层',
                    password: 'hx123456',
                    channel: '21',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头电机热成像',
                    password: 'hx123456',
                    channel: '22',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164桥下沿线',
                    password: 'hx123456',
                    channel: '4',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164小车控制箱',
                    password: 'hx123456',
                    channel: '14',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164三层楼梯口',
                    password: 'hx123456',
                    channel: '1',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头减速机1热成像',
                    password: 'hx123456',
                    channel: '31',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164沿线',
                    password: 'hx123456',
                    channel: '26',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164机头楼梯',
                    password: 'hx123456',
                    channel: '13',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164沿线',
                    password: 'hx123456',
                    channel: '26',
                    url: '10.13.155.17',
                  },
                ],
              },
              {
                label: '313、314',
                isChildren: false,
                children: [
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313机头沿线',
                    password: 'hx123456',
                    channel: '3',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313机头过道',
                    password: 'hx123456',
                    channel: '6',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313、323中间过道',
                    password: 'hx123456',
                    channel: '7',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313机头沿线',
                    password: 'hx123456',
                    channel: '8',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313机楼梯口',
                    password: 'hx123456',
                    channel: '11',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313张紧滚筒',
                    password: 'hx123456',
                    channel: '12',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313机尾沿线',
                    password: 'hx123456',
                    channel: '16',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '314机尾沿线',
                    password: 'hx123456',
                    channel: '4',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '314机尾滚筒',
                    password: 'hx123456',
                    channel: '5',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '314机尾',
                    password: 'hx123456',
                    channel: '10',
                    url: '10.13.155.16',
                  },
                ],
              },
              {
                label: '321、322',
                isChildren: false,
                children: [
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321机头沿线',
                    password: 'hx123456',
                    channel: '16',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321楼梯口2',
                    password: 'hx123456',
                    channel: '17',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321张紧控制箱',
                    password: 'hx123456',
                    channel: '20',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321楼梯口',
                    password: 'hx123456',
                    channel: '21',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322箱变',
                    password: 'hx123456',
                    channel: '22',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322机头滚筒',
                    password: 'hx123456',
                    channel: '23',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322机头',
                    password: 'hx123456',
                    channel: '24',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322机头桥下',
                    password: 'hx123456',
                    channel: '25',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321张紧滚筒',
                    password: 'hx123456',
                    channel: '27',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322除尘装置',
                    password: 'hx123456',
                    channel: '28',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321皮带沿线1',
                    password: 'hx123456',
                    channel: '1',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321机尾',
                    password: 'hx123456',
                    channel: '18',
                    url: '10.13.155.14',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321沿线',
                    password: 'hx123456',
                    channel: '15',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321机头沿线',
                    password: 'hx123456',
                    channel: '16',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321楼梯口2',
                    password: 'hx123456',
                    channel: '17',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321张紧控制箱',
                    password: 'hx123456',
                    channel: '20',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321楼梯口',
                    password: 'hx123456',
                    channel: '21',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322箱变',
                    password: 'hx123456',
                    channel: '22',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322机头滚筒',
                    password: 'hx123456',
                    channel: '23',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322机头',
                    password: 'hx123456',
                    channel: '24',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322机头桥下',
                    password: 'hx123456',
                    channel: '25',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321张紧滚筒',
                    password: 'hx123456',
                    channel: '27',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322除尘装置',
                    password: 'hx123456',
                    channel: '28',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322桥下滚筒',
                    password: 'hx123456',
                    channel: '21',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322张紧控制箱',
                    password: 'hx123456',
                    channel: '22',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322机尾滚筒',
                    password: 'hx123456',
                    channel: '7',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322皮带机尾',
                    password: 'hx123456',
                    channel: '12',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322减速机热成像',
                    password: 'hx123456',
                    channel: '30',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321视频控制箱',
                    password: 'hx123456',
                    channel: '13',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312机尾',
                    password: 'hx123456',
                    channel: '15',
                    url: '10.13.155.17',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321皮带滚筒1',
                    password: 'hx123456',
                    channel: '6',
                    url: '10.13.155.15',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322速机',
                    password: 'hx123456',
                    channel: '1',
                    url: '10.13.155.16',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '322减速机热成像',
                    password: 'hx123456',
                    channel: '3',
                    url: '10.13.155.20',
                  },
                ],
              },
              {
                label: '沿线立杆',
                isChildren: false,
                children: [
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153沿线(立杆2)',
                    password: 'hx123456',
                    channel: '1',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154沿线立杆2',
                    password: 'hx123456',
                    channel: '4',
                    url: '10.13.155.20',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311立杆3',
                    password: 'hx123456',
                    channel: '2',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311立杆1',
                    password: 'hx123456',
                    channel: '3',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '323立杆1',
                    password: 'hx123456',
                    channel: '4',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '312箱变(312立杆1)',
                    password: 'hx123456',
                    channel: '5',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '154沿线(立杆13)',
                    password: 'hx123456',
                    channel: '6',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '311沿线(立杆14)',
                    password: 'hx123456',
                    channel: '7',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆1',
                    password: 'hx123456',
                    channel: '8',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆4(153箱变)',
                    password: 'hx123456',
                    channel: '9',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '153箱变热成像',
                    password: 'hx123456',
                    channel: '10',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆2',
                    password: 'hx123456',
                    channel: '11',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆3',
                    password: 'hx123456',
                    channel: '12',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆5',
                    password: 'hx123456',
                    channel: '13',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆6',
                    password: 'hx123456',
                    channel: '14',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆7',
                    password: 'hx123456',
                    channel: '15',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆7',
                    password: 'hx123456',
                    channel: '16',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆8',
                    password: 'hx123456',
                    channel: '17',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '164立杆2',
                    password: 'hx123456',
                    channel: '18',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '321箱变热成像',
                    password: 'hx123456',
                    channel: '19',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313立杆4',
                    password: 'hx123456',
                    channel: '20',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '313立杆5',
                    password: 'hx123456',
                    channel: '21',
                    url: '10.13.155.18',
                  },
                  {
                    isChildren: true,
                    user: 'admin',
                    label: '323立杆2',
                    password: 'hx123456',
                    channel: '22',
                    url: '10.13.155.18',
                  },
                ],
              },
              // {
              //   label: '其它',
              //   isChildren: false,
              //   children: [
              //     {isChildren: true, user: 'admin',label: '323箱变', password: 'hx123456', channel: '5', url:'10.13.155.20'},
              //     {isChildren: true, user: 'admin',label: '323皮带机尾', password: 'hx123456', channel: '23', url:'10.13.155.15'},
              //     {isChildren: true, user: 'admin',label: '324机尾', password: 'hx123456', channel: '2', url:'10.13.155.16'},
              //   ],
              // },
            ],
          },
          {
            label: '恒宇',
            isChildren: false,
            children: [
              {
                label: '3号破碎站',
                isChildren: false,
                children: [
                  {
                    label: '3-1',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.80',
                  },
                  {
                    label: '3-2',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.81',
                  },
                  {
                    label: '3-3',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.82',
                  },
                  {
                    label: '3-4',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.83',
                  },
                  {
                    label: '3-5',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.84',
                  },
                  {
                    label: '3-6',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.85',
                  },
                  {
                    label: '3-7',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.86',
                  },
                  {
                    label: '3-8',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.87',
                  },
                  {
                    label: '3-9',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.88',
                  },
                  {
                    label: '3-10',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.89',
                  },
                  {
                    label: '3-11',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.90',
                  },
                  {
                    label: '3-12',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.91',
                  },
                  {
                    label: '3-13',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.92',
                  },
                ],
              },
              {
                label: '5号破碎站',
                isChildren: false,
                children: [
                  {
                    label: '3-1',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.94',
                  },
                  {
                    label: '3-2',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.95',
                  },
                  {
                    label: '3-3',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.96',
                  },
                  {
                    label: '3-4',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.97',
                  },
                  {
                    label: '3-5',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.98',
                  },
                  {
                    label: '3-6',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.99',
                  },
                  {
                    label: '3-7',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.100',
                  },
                  {
                    label: '3-8',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.101',
                  },
                  {
                    label: '3-9',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.102',
                  },
                  {
                    label: '3-10',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.103',
                  },
                  {
                    label: '3-11',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.104',
                  },
                  {
                    label: '3-12',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.105',
                  },
                  {
                    label: '3-13',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.106',
                  },
                  {
                    label: '3-14',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.107',
                  },
                ],
              },
            ],
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        videoWin: 1,
        g_iWndIndex: 0,
        szDeviceIdentify: null,
        deviceport: '8000',
        channels: [],
        ip: '10.13.154.88',
        port: '80',
        username: 'admin',
        password: 'zzhy1234',
        iRtspPort: '554',
        videoData: {},
      };
    },
    beforeDestroy() {
      this.stopVideoPlay();
    },
    mounted() {
      let demo = document.querySelector('#videoBox');
      this.width = Math.floor(demo.getBoundingClientRect().width);
      this.height = demo.getBoundingClientRect().height;
      this.init();
    },
    methods: {
      endTimeChang(e) {
        let strArr = e.split(' ');
        this.endTime = strArr[0] + ' 23:59:59';
      },
      clickLogout() {
        var self = this;
        if (null == self.szDeviceIdentify) {
          return;
        }
        let r = WebVideoCtrl.I_Logout(self.szDeviceIdentify);
        console.log('退出登录', r);
      },
      clickStopRealPlay() {
        var self = this;
        for (let i = 0; i <= self.g_iWndIndex; i++) {
          var oWndInfo = WebVideoCtrl.I_GetWindowStatus(parseInt(i));
          if (oWndInfo != null) {
            WebVideoCtrl.I_Stop({
              iWndIndex: parseInt(i),
              success: function () {
                console.log('停止预览成功');
              },
              error: function () {
                console.log('停止预览失败');
              },
            });
          }
        }
      },
      stopVideoPlay() {
        this.clickStopRealPlay();
        this.clickLogout();
      },
      startPlayback() {
        let self = this;
        if (Object.keys(self.videoData).length === 0) {
          self.$message.warning('请选择播放设备!');
          return;
        }
        console.log(self.startTime, self.endTime);
        if (self.startTime && self.endTime) {
          WebVideoCtrl.I_StartPlayback(this.szDeviceIdentify, {
            iRtspPort: self.iRtspPort,
            iStreamType: 1,
            iChannelID: parseInt(self.videoData.channel, 10),
            szStartTime: self.startTime,
            szEndTime: self.endTime,
            success: function () {
              console.log('开始回放成功！');
            },
            error: function (status, xmlDoc) {
              if (403 === status) {
                console.log('设备不支持Websocket取流！');
              } else {
                console.log('开始回放失败！');
              }
            },
          });
        } else {
          self.$message.warning('请选择开始与结束时间!');
        }
      },
      init() {
        WebVideoCtrl.I_InitPlugin(this.width, this.height, {
          bWndFull: true, // 但窗口双击全屏
          iPackageType: 2, // 封装格式 无插件只能是2
          iWndowType: 1, // 分屏类型 1*1 2*2 ....
          bNoPlugin: true, // 开启无插件模式
          cbInitPluginComplete: function () {
            console.log('初始化成功！');
            WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin');
          },
        });
      },
      clickLogin() {
        var self = this;
        if ('' == self.videoData.url || '' == self.videoData.password || '' == self.port) {
          return;
        }
        debugger;
        self.szDeviceIdentify = self.videoData.url + '_' + self.port;
        WebVideoCtrl.I_Login(self.videoData.url, 1, self.port, self.videoData.user, self.videoData.password, {
          success: function (xmlDoc) {
            console.log('登录成功');
          },
          error: function (status, xmlDoc) {
            console.log('登录失败');
          },
        });
      },
      // 获取模拟媒体通道
      getChannelInfo() {
        let self = this;
        if (!this.szDeviceIdentify) {
          return;
        }
        WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
          async: false,
          success: (xmlDoc) => {
            let oChannels = $(xmlDoc).find('VideoInputChannel');
            console.log('获取模拟通道成功222', oChannels);
            $.each(oChannels, function (i) {
              let id = $(this).find('id').eq(0).text();
              let name = $(this).find('name').eq(0).text();
              if (!name) {
                name = 'Camera ' + (i < 9 ? '0' + (i + 1) : i + 1);
              }
              self.channels.push({
                id: id,
                name: name,
              });
            });
            console.log(self.channels);
          },
          error: function (status, xmlDoc) {
            console.log('获取模拟通道失败1111', status, xmlDoc);
          },
        });
      },
      // 获取端口
      getDevicePort() {
        if (!this.szDeviceIdentify) {
          return;
        }
        var oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
        console.log('获取通道端口号111', oPort);
        if (oPort != null) {
          this.deviceport = oPort.iDevicePort;
          this.iRtspPort = oPort.iRtspPort;
        }
      },
      changeWndNum(iType) {
        this.videoWin = parseInt(iType, 10);
        WebVideoCtrl.I_ChangeWndNum(iType);
      },
      handleNodeClick(videoData) {
        if (this.videoData.url != videoData.url) {
          this.videoData = videoData;
          this.clickLogin(videoData);
        }
        // console.log(data);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .nav {
    div {
      flex: 1;
    }

    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #02041b;

    .title {
      width: 400px;
      height: 50px;
      color: #46a6f8;
      background-image: url('../../assets/bt_2.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
    }

    .gradient-text-one {
      display: flex;
      align-items: center;
      height: 50px;
      font-size: 25px;
      font-weight: bold;
      padding: 30px;
      background-image: -webkit-linear-gradient(bottom, #76b3ff, #76b3ff, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .wrapper {
    width: 100%;
    height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    background-color: #050a32;

    .left {
      width: 20%;
      height: 100%;
      padding: 20px;

      .from {
        height: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;

        p {
          color: #ffffff;
          margin: 0;
        }
      }

      .tree {
        width: 100%;
        height: 55%;
        overflow: auto;
      }

      .title {
        color: #fff;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-top: 10px;
      }

      a {
        text-decoration: none;
      }

      .nav-item {
        height: 60px;
        display: flex;
        align-items: center;
        padding-left: 20%;
        color: #fff;
        background-color: #051751;
        margin-top: 2px;
      }
    }
  }

  .right {
    width: 80%;
    height: 100%;
    background-color: #050a32;

    .video-bottom {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }

    .video {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;

      .video-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .box-item {
          width: 49.9%;
          height: 50%;
          background-color: #262626;
          border: 1px solid #02041b;
        }
      }
    }
  }

  ::v-deep .el-tree {
    color: #fff;
    background-color: transparent;
  }

  ::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #183056;
  }

  ::v-deep .el-tree-node__content:hover {
    background-color: #050a32;
  }

  ::v-deep .is-focusable:focus {
    background-color: #183056;
  }

  ::v-deep .el-input__inner {
    background-color: #000;
    color: #fff;
    border: 1px solid #3c62c0;
  }

  ::-webkit-scrollbar-track-piece {
    background: transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: #4e4e4e;
    border-radius: 20px;
  }
</style>
